<template>
  <div class="forgetPwd_container">
    <div class="forgetPwd_box">
      <!-- :model是进行双向数据绑定的  :rules是给每个参数进行规则设置，这个则是放在date()里面   ref是判定输入的数据是否合乎我们的规定，这个是放在methods里面 -->
      <el-form
        class="forgetPwd_form"
        :model="forgetPwdForm"
        :rules="forgetPwdFormRules"
        ref="forgetPwdFormRef"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input
            type="text"
            v-model="forgetPwdForm.phone"
            maxlength="11"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="forgetPwdForm.password"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPwd">
          <el-input
            type="password"
            v-model="forgetPwdForm.checkPwd"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item label="获取验证码" prop="forgetPwdCode">
          <el-input
            type="text"
            v-model="forgetPwdForm.forgetPwdCode"
          ></el-input>
          <el-button
            type="info"
            @click="onSendforgetPwdCode"
            :disabled="isDisabled"
            >{{ buttonName }}</el-button
          >
        </el-form-item>

        <el-form-item class="btns">
          <el-button type="primary" @click="onforgetPwd">找回密码</el-button>
          <el-button @click="toLogin">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { sendForgetPwdCode, forgetPwd } from "../api/forgetpwd.js";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.forgetPwdForm.checkPwd !== "") {
          this.$refs.forgetPwdFormRef.validateField("checkPwd");
        }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.forgetPwdForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      buttonName: "发送短信",
      isDisabled: false,
      time: 60,
      forgetPwdForm: {
        phone: "", //用户名
        forgetPwdCode: "", //找回密码的验证码
        password: "", //密码
        checkPwd: "", //确认密码
      },
      forgetPwdFormRules: {
        phone: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请填写11位的手机号码",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        checkPwd: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        forgetPwdCode: [
          { message: "请输入验证码", trigger: "blur" },
          {
            min: 6,
            max: 6,
            message: "请输入6位的验证码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    toLogin() {
      this.$router.push("/login");
    },
    //获取找回密码获取验证码
    onSendforgetPwdCode() {
      this.$refs.forgetPwdFormRef.validate(async (valid) => {
        if (!valid) {
          return;
        }
        //获得倒计时
        let me = this;
        me.isDisabled = true;
        let interval = window.setInterval(function () {
          me.buttonName = "（" + me.time + "秒）后重新发送";
          --me.time;
          if (me.time < 0) {
            me.buttonName = "重新发送";
            me.time = 10;
            me.isDisabled = false;
            window.clearInterval(interval);
          }
        }, 1000);
        //下面这些是短信发送;
        sendForgetPwdCode(this.forgetPwdForm.phone)
          .then((res) => {
            if (res.data.code === 0) {
            } else {
              this.$message({
                message: "警告哦，这是一条警告消息",
                type: "warning",
              });
            }
          })
          .catch(() => {
            this.$message.error("请求出错");
          });
      });
    },

    //找回密码按钮激活整个表单进行提交
    onforgetPwd() {
      this.$refs.forgetPwdFormRef.validate(async (valid) => {
        if (!valid) {
          return;
        }
        //建一个对象来符合找回密码的参数
        var forgetForm = {
          code: this.forgetPwdForm.forgetPwdCode, //找回密码验证码
          password: this.forgetPwdForm.password, //密码
          phone: this.forgetPwdForm.phone, //用户名
        };

        forgetPwd(forgetForm)
          .then((res) => {
            if (res.data.code === 0) {
              this.$message({
                message: "恭喜您，找回密码啦",
                type: "success",
              });
              this.$router.push("/login");
            } else {
              this.$message({
                message: "对不起，找回失败",
                type: "warning",
              });
            }
          })
          .catch(() => {
            this.$message.error("请求出错");
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.forgetPwd_container {
  background-color: grey;
  height: 100%;
}
.forgetPwd_form {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 5px;
}
.forgetPwd_box {
  width: 450px;
  height: 500px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .btns {
    display: flex;
    justify-content: space-around;
  }
}
</style>